<template>
  <div id="acceptance" class="tabs">
    <div class="title">已办业务列表</div>
    <div class="tabhead">
      <el-form ref="form" :model="form" label-width="80px" inline size="small" style="height: 132px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="办理地区:">
              <el-select v-model="form.type" placeholder="请输入用户地区" style="width: 200px; height: 40px">
                <el-option v-for="item in options" :key="item.id" :label="item.label" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="用户部门:">
              <el-select v-model="form.type" placeholder="请输入用户部门" style="width: 200px; height: 40px">
                <el-option v-for="item in options" :key="item.id" :label="item.label" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="搜经办人:">
              <el-input v-model="form.tel" placeholder="请输入经办人" style="width: 200px; height: 40px"></el-input>
            </el-form-item>
            <el-form-item label="办理事项:">
              <el-select v-model="form.type" placeholder="请输入办理事项" style="width: 200px; height: 40px">
                <el-option v-for="item in options" :key="item.id" :label="item.label" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label-width="80px" label="是否通办:">
              <el-button>是</el-button>
              <el-button>否</el-button>
            </el-form-item>
            <el-form-item style="padding-left: 101px; float: right">
              <el-button type="primary" @click="searchData()" style="width: 150px; height: 40px">点击搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="办理环节:">
          <el-select v-model="form.type" placeholder="请选择办理环节" style="width: 200px; height: 40px">
            <el-option v-for="item in options" :key="item.id" :label="item.label" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="办理状态:">
          <el-select v-model="form.type" placeholder="请选择办理状态" style="width: 200px; height: 40px">
            <el-option v-for="item in options" :key="item.id" :label="item.label" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label-width="112px" label="办理流程状态:">
          <el-select v-model="form.type" placeholder="请选择办理流程状态" style="width: 200px; height: 40px">
            <el-option v-for="item in options" :key="item.id" :label="item.label" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="受理时间:">
          <el-select v-model="form.type" placeholder="请选择办理受理时间" style="width: 200px; height: 40px">
            <el-option v-for="item in options" :key="item.id" :label="item.label" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="办结时间:">
          <el-select v-model="form.type" placeholder="请选择办理结束时间" style="width: 200px; height: 40px">
            <el-option v-for="item in options" :key="item.id" :label="item.label" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-table :data="tableData" border size="mini" :header-cell-style="tabHeader">
        <el-table-column label="序号" type="index" width="60px"></el-table-column>
        <el-table-column label="实施清单名称">
          <template slot-scope="scope">
            <span>{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="办事情形">
          <template slot-scope="scope">
            <span>{{ scope.row.jigou }}</span>
          </template>
        </el-table-column>
        <el-table-column label="办件编号">
          <template slot-scope="scope">
            <span style="overflow: hidden; white-space: nowrap">{{ scope.row.bianma | ellipsis }}</span>
          </template>
        </el-table-column>
        <el-table-column label="事项类型">
          <template slot-scope="scope">
            <span>{{ scope.row.shijian }}</span>
          </template>
        </el-table-column>
        <el-table-column label="申请人">
          <template slot-scope="scope">
            <span>{{ scope.row.user }}</span>
          </template>
        </el-table-column>
        <el-table-column label="经办人">
          <template slot-scope="scope">
            <span>{{ scope.row.users }}</span>
          </template>
        </el-table-column>
        <el-table-column label="登记时间">
          <template slot-scope="scope">
            <span style="overflow: hidden; white-space: nowrap">{{ scope.row.demotime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="时限">
          <template slot-scope="scope">
            <span>{{ scope.row.time }}</span>
          </template>
        </el-table-column>
        <el-table-column label="办件状态">
          <template slot-scope="scope">
            <span>{{ scope.row.ztai }}</span>
          </template>
        </el-table-column>
        <el-table-column label="取距...">
          <template slot-scope="scope">
            <span>{{ scope.row.quju }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="340px">
          <template slot-scope="scope">
            <el-button type="primary" @click="del(scope.row.tel)">查看</el-button>
            <el-button type="success" @click="del(scope.row.tel)">修改</el-button>
            <el-button type="warning" @click="del(scope.row.tel)">进度</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="tabpage">
        <Paging></Paging>
      </div>
    </div>
  </div>
</template>

<script>
  import { tabHeader } from '@/config/config';

  import { findHandlingList } from '../../../api/tabulation/business/business';
  //分页
  import Paging from '../../../components/Paging';

  export default {
    name: 'acceptanceOneEvent-two',
    components: {
      Paging
    },
    data() {
      return {
        tabHeader: tabHeader,
        tableData: [
          {
            index: '1',
            jigou: '是否本人办理...',
            name: '小餐饮经营许可证',
            bianma: '10010302932328328',
            time: '24天0时0分',
            shijian: '行政权力',
            user: '四川期刊...',
            users: '综窗01',
            demotime: '2021-5-1 2022-5-1',
            ztai: '暂存',
            quju: '暂无'
          },
          {
            index: '1',
            jigou: '是否本人办理...',
            name: '小餐饮经营许可证',
            bianma: '10010302932328328',
            time: '24天0时0分',
            shijian: '行政权力',
            user: '四川期刊...',
            users: '综窗01',
            demotime: '2021-5-1 2022-5-1',
            ztai: '暂存',
            quju: '暂无'
          },
          {
            index: '1',
            jigou: '是否本人办理...',
            name: '小餐饮经营许可证',
            bianma: '10010302932328328',
            time: '24天0时0分',
            shijian: '行政权力',
            user: '四川期刊...',
            users: '综窗01',
            demotime: '2021-5-1 2022-5-1',
            ztai: '暂存',
            quju: '暂无'
          },
          {
            index: '1',
            jigou: '是否本人办理...',
            name: '小餐饮经营许可证',
            bianma: '10010302932328328',
            time: '24天0时0分',
            shijian: '行政权力',
            user: '四川期刊...',
            users: '综窗01',
            demotime: '2021-5-1 2022-5-1',
            ztai: '暂存',
            quju: '暂无'
          },
          {
            index: '1',
            jigou: '是否本人办理...',
            name: '小餐饮经营许可证',
            bianma: '10010302932328328',
            time: '24天0时0分',
            shijian: '行政权力',
            user: '四川期刊...',
            users: '综窗01',
            demotime: '2021-5-1 2022-5-1',
            ztai: '暂存',
            quju: '暂无'
          },
          {
            index: '1',
            jigou: '是否本人办理...',
            name: '小餐饮经营许可证',
            bianma: '10010302932328328',
            time: '24天0时0分',
            shijian: '行政权力',
            user: '四川期刊...',
            users: '综窗01',
            demotime: '2021-5-1 2022-5-1',
            ztai: '暂存',
            quju: '暂无'
          },
          {
            index: '1',
            jigou: '是否本人办理...',
            name: '小餐饮经营许可证',
            bianma: '10010302932328328',
            time: '24天0时0分',
            shijian: '行政权力',
            user: '四川期刊...',
            users: '综窗01',
            demotime: '2021-5-1 2022-5-1',
            ztai: '暂存',
            quju: '暂无'
          },
          {
            index: '1',
            jigou: '是否本人办理...',
            name: '小餐饮经营许可证',
            bianma: '10010302932328328',
            time: '24天0时0分',
            shijian: '行政权力',
            user: '四川期刊...',
            users: '综窗01',
            demotime: '2021-5-1 2022-5-1',
            ztai: '暂存',
            quju: '暂无'
          },
          {
            index: '1',
            jigou: '是否本人办理...',
            name: '小餐饮经营许可证',
            bianma: '10010302932328328',
            time: '24天0时0分',
            shijian: '行政权力',
            user: '四川期刊...',
            users: '综窗01',
            demotime: '2021-5-1 2022-5-1',
            ztai: '暂存',
            quju: '暂无'
          }
        ],
        form: {
          nickname: '',
          tel: '',
          userId: '',
          type: ''
        },
        options: [
          { id: 1, label: '团长' },
          { id: 2, label: '团员' }
        ]
      };
    },
    filters: {
      ellipsis(value) {
        if (!value) return '';
        if (value.length > 12) {
          return value.slice(0, 12) + '...';
        }
        return value;
      }
    },
    methods: {
      searchData() {},
      del() {},
      async findHandlingList() {
        const data = await findHandlingList();
        if (data.data.success) {
          console.log(data);
        }
      }
    },
    mounted() {
      this.findHandlingList();
    }
  };
</script>

<style lang="scss">
  @import '../../../assets/css/publicList.scss';
  #acceptance {
    .el-input--small .el-input__inner {
      height: 40px;
      line-height: 40px;
    }
    .el-table .cell {
      text-align: center;
    }
    .el-form-item__label {
      line-height: 40px;
    }
    .button {
      width: 110px;
      height: 40px;
      padding-left: 10px;
    }
    .el-item {
      width: 100px;
      height: 22px;
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 500;
      line-height: 22px;
      color: #222222;
      opacity: 1;
    }
  }
</style>
